<template>
  <div class="manage_ment" v-loading="loading">
    <div class="m_m_b_s">
      <div class="m-b">
        <el-button type="primary" @click="(dialogVisible = true), (flag = true)"
          >+新增</el-button
        >
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose"
          :close-on-click-modal="false"
        >
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item prop="date" label="日期">
              <el-date-picker
                placeholder="选择日期"
                v-model="ruleForm.date"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">
                {{ flag ? "立即创建" : "更新" }}</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div class="m_s">
        <el-input v-model="keywords" placeholder="请输入姓名">
          <el-button type="primary" @click="onSearch">搜索</el-button></el-input
        >
      </div>
    </div>
    <div class="table_l">
      <el-table
        :data="
          reverseSum.slice(
            (limitePage.page - 1) * limitePage.limit,
            limitePage.limit * limitePage.page
          )
        "
        max-height="600"
        border
        style="width: 100%"
      >
        <el-table-column prop="date" label="日期" width="" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="" align="center">
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
              编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <div></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="limitePage.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ManageMent",
  data() {
    return {
      // 对话框
      dialogVisible: false,
      // 搜索
      keywords: "",
      filterDataShow: [],
      // 表格数据
      tableData: [
        {
          id: 1,
          date: "2016-06-03",
          name: "大胖",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2022-06-02",
          name: "小胖",
          address: "上海市普陀区金沙江路 1501 弄",
        },
        {
          id: 3,
          date: "2022-02-04",
          name: "小兰",
          address: "上海市普陀区金沙江路 1510 弄",
        },
        {
          id: 4,
          date: "2022-02-01",
          name: "小虎",
          address: "上海市普陀区金沙江路 1511 弄",
        },
        {
          id: 5,
          date: "2022-02-08",
          name: "小龙",
          address: "上海市普陀区金沙江路 1512 弄",
        },
        {
          id: 6,
          date: "2000-02-06",
          name: "黑狐王",
          address: "上海市普陀区金沙江路 1200 弄",
        },
        {
          id: 7,
          date: "2003-02-07",
          name: "方丈大师",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 8,
          date: "2016-05-04",
          name: "诺亚方舟",
          address: "上海市普陀区金沙江路 2000 弄",
        },
        {
          id: 9,
          date: "2020-11-01",
          name: "世界末日",
          address: "上海市普陀区金沙江路 8000 弄",
        },
        {
          id: 10,
          date: "2010-05-22",
          name: "银河碉堡",
          address: "上海市普陀区金沙江路 1588 弄",
        },
        {
          id: 11,
          date: "2008-02-06",
          name: "变形金刚",
          address: "上海市普陀区金沙江路 3000 弄",
        },
        {
          id: 12,
          date: "2016-05-07",
          name: "钢铁侠",
          address: "上海市普陀区金沙江路 7000 弄",
        },
        {
          id: 13,
          date: "2016-05-04",
          name: "绿巨人",
          address: "上海市普陀区金沙江路 5518 弄",
        },
        {
          id: 14,
          date: "2016-05-01",
          name: "美国队长",
          address: "上海市普陀区金沙江路 9999 弄",
        },
        {
          id: 15,
          date: "2016-05-08",
          name: "蜘蛛侠",
          address: "上海市普陀区金沙江路 6518 弄",
        },
        {
          id: 16,
          date: "2016-05-06",
          name: "雷神",
          address: "上海市普陀区金沙江路 8518 弄",
        },
        {
          id: 17,
          date: "2016-05-07",
          name: "黑寡妇",
          address: "上海市普陀区金沙江路 99518 弄",
        },
        {
          id: 18,
          date: "2016-05-04",
          name: "鹰眼",
          address: "上海市普陀区金沙江路 12518 弄",
        },
        {
          id: 19,
          date: "2016-05-01",
          name: "死侍",
          address: "上海市普陀区金沙江路 11518 弄",
        },
        {
          id: 20,
          date: "2016-05-08",
          name: "金刚狼",
          address: "上海市普陀区金沙江路 12518 弄",
        },
        {
          id: 21,
          date: "2016-05-06",
          name: "红骷髅",
          address: "上海市普陀区金沙江路 21518 弄",
        },
        {
          id: 22,
          date: "2016-05-07",
          name: "灭霸",
          address: "上海市普陀区金沙江路 13518 弄",
        },
        {
          id: 23,
          date: "2016-05-04",
          name: "高启强",
          address: "上海市普陀区金沙江路 11111518 弄",
        },
        {
          id: 24,
          date: "2016-05-01",
          name: "高启盛",
          address: "上海市普陀区金沙江路 991518 弄",
        },
        {
          id: 25,
          date: "2016-05-08",
          name: "安欣",
          address: "上海市普陀区金沙江路 13333518 弄",
        },
        {
          id: 26,
          date: "2016-05-06",
          name: "孟钰",
          address: "上海市普陀区金沙江路 30000 弄",
        },
        {
          id: 27,
          date: "2016-05-07",
          name: "孟德海",
          address: "上海市普陀区金沙江路 666666 弄",
        },
        {
          id: 28,
          date: "2016-05-04",
          name: "徐忠",
          address: "上海市普陀区金沙江路 66666 弄",
        },
        {
          id: 29,
          date: "2016-05-01",
          name: " 泰叔",
          address: "上海市普陀区金沙江路 77777777 弄",
        },
        {
          id: 30,
          date: "2016-05-08",
          name: "李有田",
          address: "上海市普陀区金沙江路 99999 弄",
        },
        {
          id: 31,
          date: "2016-05-06",
          name: "安长林",
          address: "上海市普陀区金沙江路 99999 弄",
        },
        {
          id: 32,
          date: "2016-05-07",
          name: "李响",
          address: "上海市普陀区金沙江路 777777 弄",
        },
      ],
      loading: true,
      currentPage: 1, // 当前页
      flag: true,
      index: 0,
      ruleForm: {
        id: "",
        name: "",
        date: "",
        address: "",
      },
      rules: {
        date: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      limitePage: {
        limit: 10,
        page: 1,
      },
      fage1: false,
    };
  },
  computed: {
    reverseSum() {
      // return this.tableData.reverse();   // tableData数组取反
      if (this.fage1) {
        return this.filterDataShow;
      } else {
        return this.tableData;
      }
    },
    //showTable计算属性通过slice方法计算表格当前应显示的数据
    // showTable() {
    //   return this.filterDataShow.slice(
    //     (this.currentPage - 1) * this.pagesize,
    //     this.currentPage * this.pagesize
    //   );
    // },
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    this.onSearch(); //在页面挂载后调用此方法，确保数据与页面发生了交互
  },
  methods: {
    // 时间格式化
    filterTime(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    // 添加数据
    submitForm(ruleForm) {
      this.fage1 = false;

      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          let date = this.filterTime(this.ruleForm.date);
          this.ruleForm.date = date;
          console.log(this.flag);
          if (this.flag) {
            // this.ruleForm.id++;
            // console.log(this.ruleForm.id);
            this.tableData.unshift({
              // id: this.ruleForm.id,
              id: this.tableData.length + 1,
              name: this.ruleForm.name,
              date: this.ruleForm.date,
              address: this.ruleForm.address,
            });
          } else {
            this.tableData.forEach((item, index) => {
              if (item.id === this.ruleForm.id) {
                console.log(item.id);
                this.tableData[index].name = this.ruleForm.name;
                this.tableData[index].date = this.ruleForm.date;
                this.tableData[index].address = this.ruleForm.address;
              }
            });
            this.flag = true;
          }
          this.resetForm();
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 编辑按钮
    handleEdit(index, row) {
      console.log(index, row);
      this.index = index;
      this.fage1 = false;
      this.flag = false;
      this.dialogVisible = true;
      console.log(row);
      this.ruleForm.id = row.id;
      this.ruleForm.name = row.name;
      this.ruleForm.date = row.date;
      this.ruleForm.address = row.address;
    },
    // 重置 关闭窗口
    handleClose() {
      this.fage1 = false;
      // console.log(this.$refs[ruleForm]);
      this.resetForm();
      this.dialogVisible = false;
    },
    // 重置按钮
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    // 删除
    handleDelete(index, row) {
      this.fage1 = false;
      // console.log(index, row);
      this.$confirm("确认删除？", {
        // confirmButtonText: "前往认证", //确认按钮的文字显示
        // type: "warning",
        center: true, //文字居中显示
        showCancelButton: false, //不显示取消按钮
        showClose: false, //是否显示右上角的x
        closeOnClickModal: false, //是否可以点击空白处关闭弹窗
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showConfirmButton: true,
        showCancelButton: true,
      })
        .then((_) => {
          this.tableData.forEach((item, i) => {
            if (item.id == row.id) {
              this.tableData.splice(i, 1);
              console.log(this.tableData);
            }
          });
          this.$message({
            message: "删除成功",
            type: "success",
          });
          // done();
        })
        .catch((_) => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },

    // 添加class
    // tableRowClassName({ row, rowIndex }) {
    //   // console.log(rowIndex);
    //   if (rowIndex === 1) {
    //     return "warning-row";
    //   } else if (rowIndex === 3) {
    //     return "success-row";
    //   } else if (rowIndex === 5) {
    //     return "warning-row";
    //   }else if (rowIndex === 7) {
    //     return "success-row";
    //   }else if (rowIndex === 9) {
    //     return "warning-row";
    //   }
    //   return "";
    // },

    // 分页
    handleSizeChange(val) {
      this.fage1 = false;
      console.log(`每页 ${val} 条`);
      this.limitePage.limit = val;
    },
    handleCurrentChange(val) {
      this.fage1 = false;
      console.log(`当前页: ${val}`);
      this.limitePage.page = val;
    },
    // 搜索
    onSearch() {
      this.fage1 = true;
      this.currentPage = 1;
      let filterKeywords = this.keywords.trim();
      let filerReasource = this.tableData.filter((item) => {
        //过滤全部数据
        if (item.name.includes(filterKeywords)) {
          return item;
        }
      });
      this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow
    },
  },
  watch: {
    //监听搜索框内容，当搜索框内容发生变化时调用searchResource方法
    keywords: {
      handler() {
        this.onSearch();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.manage_ment {
  margin-right: 10px;
  .m_m_b_s {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 10px;
    .m_s {
      display: flex;
      .el-button {
        margin-left: 10px;
      }
    }
  }
  .table_l {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 20px;
    /deep/.el-table {
      .warning-row {
        background: oldlace;
      }
      .success-row {
        background: #f0f9eb;
      }
    }
    .pagination {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
  }
}
/deep/.el-table {
  .el-table__row:nth-child(2n) {
    background-color: oldlace;
  }
  // .el-table__row:nth-child(2n+1) {
  //   background: #f0f9eb;
  // }
}
</style>
